<template>
  <div id="center">
    <!-- 直接需要显示的内容是头像图片，用户名 -->
    <section id="top-area">
      <div id="user-pic">
        <van-image
          width="160px"
          height="160px"
          round
          fit="cover"
          src="http://p1.meituan.net/codeman/e32b47a07b818bf9a1d4086a882c18a62282.png"
        />
      </div>
      <p id="nickname">{{nickName.phone ||nickName.name }}</p>
    </section>
    <section class="nav">
      <router-link to="/hongbao" tag="div" class="nav-item">
        <img
          src=""
        />
        <span>美团红包</span>
      </router-link>
      <router-link to="/addresslist" tag="div" class="nav-item">
        <img
          src=""
        />
        <span>收获地址</span>
      </router-link>
      <router-link to="questions" tag="div" class="nav-item">
        <img
          src=""
        />
        <span>常见问题</span>
      </router-link>
      <div class="nav-item">
        <img
          src=""
        />
        <span>美团协议与说明</span>
      </div>
      <div class="nav-item">
        <img
          src="https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/d09cbf82209a58ed499aab465b4d94f0.png"
        />
        <span @click="reset">退出登录</span>
      </div>
    </section>
    <section class="serve-phone">
      <span>客服电话：10109777</span>
    </section>
    <section class="serve-time">
      <span>服务时间：09:00-23:00</span>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { mapState } from 'vuex'
import { Image as WebPic, Dialog } from "vant";
Vue.use(WebPic, Dialog);
export default {
  data(){
    return{
      nickName:''
    }
  },
  methods: {
    reset() {
      //退出登录
      Dialog.confirm({
        title: "退出",
        message: "您确认退出吗？",
      })
        .then(() => {
          this.$store.dispatch("user/logout");
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
      
    },
  },
  computed:{
    ...mapState('user',['userInfo'])
  },
  mounted(){
    this.nickName=JSON.parse(sessionStorage.getItem('userInfo'))
    this.$store.dispatch('user/recordUser',this.nickName)
  }
};
</script>

<style lang='scss' scoped>
#center {
  background: rgb(240, 240, 240);
  height: 667px;
  width: 375px;
}
#top-area {
  width: 375px;
  height: 162px;
  background-image: url("http://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/78890a8f1859bc10152151fc64aff5cc.png");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  #user-pic {
    display: flex;
    justify-content: center;
  }
  #nickname {
    font-size: 16px;
    margin-top: 8px;
  }
}
.nav {
  background: #fff;
  .nav-item {
    width: 97%;
    margin-left: 3%;
    padding: 10px 0;
    border-bottom: 1px solid #e3e3e3;
    img {
      width: 15px;
      display: inline-block;
      margin: 5px 10px -2px 0;
    }
    span {
      font-size: 14px;
      line-height: 20px;
      color: #333333;
    }
    span:after {
      display: block;
      content: ">";
      float: right;
      margin-right: 22px;
      font-size: 18px;
      line-height: 18px;
      color: #aaaaaa;
      transform: scaleY(1.5) translateY(10%);
    }
  }
}
.serve-phone {
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
  color: #ffb000;
  padding: 10px 0;
  background: white;
}
.serve-time {
  font-size: 12px;
  text-align: center;
  color: #999999;
  padding: 10px 0;
  margin-bottom: 65px;
}
</style>
